<template>
  <transition name="bounce">
    <section class="">
      <div class="pro-num flex-bt">
        <span>产品共{{total}}个</span>
        <span>已审{{newNum}}个</span>
        <span>未审{{oldNum}}个</span>
      </div>

      <ul class="pro-list">
        <li class="pro-item flex"
            :class="{active: item.active}"
            v-for="(item, index) in products"
            :key="index"
            @tap="selectProduct(index)"
        >
          <div class="pro-lt">
            <div class="pro-pic">
              <img :src="item.image" alt="产品图">
            </div>
          </div>
          <div class="pro-rt">
            <p class="pro-name" v-text="item.name">-</p>
            <div class="price-row">
              <span class="pro-price">￥{{item.price}}</span>
              <span class="pro-size" v-text="item.specifications">规格</span>
            </div>
            <p class="pro-fit">利润分配方式: {{item.cost_type}}</p>
          </div>
        </li>
      </ul>

      <div class="btn-box">
        <button type="button" class="btn-sug" @tap='submit(2)'>给意见</button>
        <button type="button" class="btn-score" @tap='submit(1)'>审核通过</button>
      </div>
    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header';
  import {MH_API} from "@/api/api";
  export default {
    name: "product-review",
    data () {
      return {
        products: [
          // {
          //   pic: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3316084142,727466806&fm=200&gp=0.jpg',
          //   title: '郁金香玫瑰满天星花束套餐送给最美丽的她',
          //   price: 198,
          //   size: '盒装',
          //   profit: '1/10000',
          //   active: true
          // },
          // {
          //   pic: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3316084142,727466806&fm=200&gp=0.jpg',
          //   title: '郁金香玫瑰满天星花束套餐送给最美丽的她',
          //   price: 198,
          //   size: '盒装',
          //   profit: '1/10000',
          //   active: false
          // },
          // {
          //   pic: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3316084142,727466806&fm=200&gp=0.jpg',
          //   title: '郁金香玫瑰满天星花束套餐送给最美丽的她',
          //   price: 198,
          //   size: '盒装',
          //   profit: '1/10000',
          //   active: false
          // }
        ],
        total: 0,
        newNum: 0,
        oldNum: 0
      }
    },
    methods: {
      selectProduct (i) {
        this.$set(this.products[i],'active',!this.products[i].active);
      },
      submit(type){
        let idArr = [];
        for(let i=0,len=this.products.length;i<len;i++){
          if(this.products[i].active){
            idArr.push(this.products[i].id)
          }
        }
        MH_API.examineGoods({
          type: type,
          id: idArr
        }).then(res => {
          if (res.status === 200) {
            mui.toast('审核成功');
            location.reload();
          }
          else{
            mui.toast(res.msg)
          }
        })
      }
    },
    components: {
      MhHeader
    },
    created(){
      let self = this;
      MH_API.getGoodsList({
        type: 0
      }).then(res => {
        if (res.status === 200) {
          self.total = res.data.length;
        }
      })
      MH_API.getGoodsList({
        type: 1
      }).then(res => {
        if (res.status === 200) {
          self.newNum = res.data.length;
          self.products = res.data;
        }
      })
      MH_API.getGoodsList({
        type: 2
      }).then(res => {
        if (res.status === 200) {
          self.oldNum = res.data.length;
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .pro-num {
    padding: .8rem 2.5rem;
    border-bottom: 1px solid #eee;
    font-size: 1.2rem;
    color: #666;
  }
  .pro-lt {width: 8rem;}
  .pro-rt {
    padding-left: .6rem;
    padding-right: 5rem;
    flex: 1;
  }
  .pro-pic {@include mh-avatar-box(8rem, 8rem);}
  .pro-name {@include sc(1.3rem, #333);}
  .pro-price {
    margin-right: 1rem;
    @include sc(1.3rem, #f26c60);
  }
  .pro-size {@include sc(1.2rem, #666);}
  .pro-fit {@include sc(1.1rem, #999);}
  .pro-item {
    background: url("../../assets/images/ico/ic_vo_uncheck.png") no-repeat 95% center;
    background-size: 1.8rem 1.85rem;
  }
  .pro-item.active {
    background: url("../../assets/images/ico/ic_vo_check.png") no-repeat 95% center;
    background-size: 1.8rem 1.85rem;
  }
  .btn-box {
    padding: 2rem 0;
    text-align: center;
  }
  .btn-sug,.btn-score {
    width: 8.5rem;
    height: 3.2rem;
    margin-right: 2rem;
    border: .05rem solid #e685aa;
    border-radius: 1.6rem;
    font-size: 1.5rem;
  }
  .btn-sug {
    color: #e685aa;
  }
  .btn-score {
    background: #e685aa;
    color: #fff;
  }
</style>
